<template>
	<view v-if="isTester" class="test-box">
		<view class="test-btn" @click="handleOpenSetting">
			<u-icon name="setting-fill" color="#fff" size="40"></u-icon>
		</view>
		<u-modal v-model="visibleSetting" :show-title="false">
			<u-cell-group style="margin-top:15px;">
				<u-cell-item title="开启学习测试模式" :arrow="false">
					<u-switch v-model="studyStore.tester.isTestMode" :size="40"></u-switch>
				</u-cell-item>
				<view style="padding: 0 20px; display: flex;flex-wrap: wrap; font-size: 14px;">
					<view class="step-item"><text class="label">上节课回顾</text><u-switch v-model="studyStore.tester.prevClassBack" :size="22"></u-switch></view>
					<view class="step-item"><text class="label">筛词测试</text><u-switch v-model="studyStore.tester.filterWordTest" :size="22"></u-switch></view>
					<view class="step-item"><text class="label">词汇学习</text><u-switch v-model="studyStore.tester.studyWord" :size="22"></u-switch></view>
				</view>
				<view style="padding: 0 20px; display: flex;flex-wrap: wrap; font-size: 14px;">
					<view class="step-item"><text class="label">测试-英译汉</text><u-switch v-model="studyStore.tester.testYYH" :size="22"></u-switch></view>
					<view class="step-item"><text class="label">测试-汉译英</text><u-switch v-model="studyStore.tester.testHYY" :size="22"></u-switch></view>
					<view class="step-item"><text class="label">测试-听音选词</text><u-switch v-model="studyStore.tester.testTX" :size="22"></u-switch></view>
					<view class="step-item"><text class="label">测试-拼写</text><u-switch v-model="studyStore.tester.testSPELL" :size="22"></u-switch></view>
					<view class="step-item"><text class="label">测试-挖空拼写</text><u-switch v-model="studyStore.tester.testSPELL_SIMPLE" :size="22"></u-switch></view>
					<view class="step-item"><text class="label">测试-音节拼写</text><u-switch v-model="studyStore.tester.testSPELL_SYLLABLE" :size="22"></u-switch></view>
					<view class="step-item"><text class="label">挖空填词</text><u-switch v-model="studyStore.tester.testSENTENCE_TEST" :size="22"></u-switch></view>
				</view>
				<u-cell-item title="开启复习测试模式" :arrow="false">
					<u-switch v-model="isReviewTestMode" :size="40"></u-switch>
				</u-cell-item>
			</u-cell-group>
		</u-modal>
	</view>
</template>

<script lang="ts" setup>
	import { onShow } from '@dcloudio/uni-app';
	import { onMounted, ref } from 'vue';
	import { ktluser } from '@/utils';
	import { useStudyStore } from '@/store/study';
	
	/** 课程列表：测试工具 */
	defineOptions({ name: 'class-tester', inheritAttrs: false });
	
	const studyStore = useStudyStore();
	const isTester = ref(false);
	const visibleSetting = ref(false);
	const isReviewTestMode = ref(false);
	
	/** 打开测试配置工具 */
	const handleOpenSetting = () => {
		visibleSetting.value = true;
	}
	
	onShow(() => {
		const user = ktluser.getUser(false);
		isTester.value = Boolean(user.IsTester);
	})
</script>

<style>
	.test-btn{
		position: fixed;
		z-index: 5;
		right: 15px;
		bottom: 80px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: red;
		color: aliceblue;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.step-item{
		width: 50%;
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}
	.label{
		margin-right: 4px;
	}
</style>